<template>
	<div>
		<div class="ask">
			<x-header :left-options="{backText: ''}" @on-click-back="isSideBarShow = false">询底价</x-header>
			<router-link v-if="truckBasicInfo.truckInfo" :to="{path:'/detail/descript',query:{id:truckBasicInfo.truckInfo.id}}" class="flex car-info lh1 bg_white bor-b block">
				<img :src="truckBasicInfo.truckInfo ? truckBasicInfo.truckInfo.logo : ''" class="car-image mr10">
				<div class="flex-item fs12 lh18">
					<h4>{{truckBasicInfo.truckInfo ? truckBasicInfo.truckInfo.name : ''}}</h4>
					<template v-if="truckBasicInfo.truckInfo">
						<div class="mt10 price" v-if="truckBasicInfo.truckInfo.low_price && !truckBasicInfo.truckInfo.high_price">{{truckBasicInfo.truckInfo}}万元起</div>
						<div class="mt10 price" v-if="!truckBasicInfo.truckInfo.low_price && truckBasicInfo.truckInfo.high_price">{{truckBasicInfo.truckInfo.high_price}}万元</div>
						<div class="mt10 price" v-if="truckBasicInfo.truckInfo.low_price && truckBasicInfo.truckInfo.high_price">{{truckBasicInfo.truckInfo.low_price}}-{{truckBasicInfo.truckInfo.high_price}}万元</div>
						<div class="mt10 price" v-if="!truckBasicInfo.truckInfo.low_price && !truckBasicInfo.truckInfo.high_price">暂无报价</div>
					</template>
				</div>
				<i class="iconfont fs20 ml5">&#xe603;</i>
			</router-link>
			<div class="bg_white">
				<div class="bor-b p8">
					<input type="text" class="form-input mb10" name="" placeholder="请填写您的姓名(1-6个汉字)" maxlength="6" v-model="formData.username">
					<input type="text" class="form-input" name="" placeholder="请填写手机号获取底价" maxlength="11" v-model="formData.userphone">
				</div>
			</div>
			<div class="bg_white address">
				<group>					
					<x-address :title="title" hide-district v-model="formData.address" :list="addressData" placeholder="请选择提车地区">
						<template slot="title" slot-scope="props"><!-- use scope="props" when vue < 2.5.0 -->
							<span :class="props.labelClass" :style="props.labelStyle" style="height:24px;">
								<span style="vertical-align:middle;">提车地区</span>
							</span>
						</template>
					</x-address>
				</group>
				<group>	
					<x-address :title="title" hide-district  v-model="formData.numberAddress" :list="addressData" placeholder="请选择上牌地区">
						<template slot="title" slot-scope="props"><!-- use scope="props" when vue < 2.5.0 -->
							<span :class="props.labelClass" :style="props.labelStyle" style="height:24px;">
								<span style="vertical-align:middle;">上牌地区</span>
							</span>
						</template>
					</x-address>
				</group>
			</div>
			<div class="number">
						<x-number :value="1" v-model="formData.count" title="购买数量" fillable class="bg_white " align="left"></x-number class="bor_b">
					<div class="flex lhh50 bg_white pl15 pr15">
						<span>购车时间</span>
						<div class="flex-item ml20" >
							<check-icon v-model="buyTime.week" @click.native="selectBuyTime('week', 0)">一周</check-icon>
							<check-icon v-model="buyTime.month" @click.native="selectBuyTime('month', 1)">一个月</check-icon>
							<check-icon v-model="buyTime.threemonth" @click.native="selectBuyTime('threemonth', 2)">三个月</check-icon>
						</div>	
					</div>
			</div>
			<div style="margin-bottom: 1.22667rem;">
				<h5 class="lhh40  fs14 c333  pl15 pr15 bg_agray">选择询价经销商（最多可选择3家）</h5>
				<!-- <div class="flex bg_white business-item  pr15" v-for="(item, index) in truckDealerInfo" :key="index">
					<check-icon :value.sync="isChecked"></check-icon>
					<div class="ml10">
						<p class="c_333">{{item.name}}</p>
						<p class="c_999 fs13 mt10">{{item.address}}</p>
					</div>
				</div> -->
				<checklist :options="dealerListInfo" v-model="formData.dealerIdList" :max=3></checklist>
			</div>
		</div>
		<div class="fullbutton" @click="submitOk">免费获取最低价</div>
	</div>
</template>

<script>
	import { XAddress, ChinaAddressV4Data ,Group, XNumber, CheckIcon, XHeader, Checklist, ToastPlugin} from 'vux'
	import {mapActions, mapGetters} from 'vuex'
	import Vue from 'vue'
	Vue.use(ToastPlugin)
	export default {
		components:{
			Group,
			XAddress,
			XNumber,
			CheckIcon,
			XHeader,
			Checklist
		},
		computed:{
			...mapGetters('detail',[
				'truckBasicInfo',
				'dealerListInfo'
			])
		},
		data () {
			return {
				addressData:ChinaAddressV4Data,
				formData: {
					username: '',
					userphone: '',
					address: [],
					count: 1,
					numberAddress: [],
					dealerIdList: [],
					buyTimeVal: ''
				},
				title:'121212',
				buyTime:{					
					week:false,
					month:false,
					threemonth:false
				},
				isChecked:false,
				truck_info_id:''
			}
		},
		methods:{
			...mapActions('detail',[
				'getTruckBaseInfo',
				'getDealerListInfo',
				'getLowestPrice'
			]),
			selectBuyTime (type, val)  {
				for(var k in this.buyTime) {
					if( k == type) {
						this.buyTime[k] = !this.buyTime[k];
					}else {
						this.buyTime[k] = false
					}
				}
				this.formData.buyTimeVal = val
			},
			showTip(tips) {
				this.$vux.toast.show({
				 text: tips,
				 type:'cancel',
				 width:'5.33333rem',
				 position:'middle'
				})
			},
			checkForm () {
				let {username, userphone, address, count, numberAddress, dealerIdList, buyTimeVal} = this.formData
				if(!username) {
					this.showTip('请填写您的姓名(1-6个汉字)');
					return false;
				}
				if(!/^[1][3,4,5,7,8][0-9]{9}$/.test(userphone)) {
					this.showTip('请填写正确的手机号获取底价');
					return false;
				}
				if(address.length == 0) {
					this.showTip('请选择提车地区');
					return false;
				}
				if(numberAddress.length == 0) {
					this.showTip('请选择上牌地区');
					return false;
				}
				if(! (typeof buyTimeVal == 'number')) {
					this.showTip('请选择购车时间');
					return false;
				}
				if(dealerIdList.length == 0) {
					this.showTip('请选择询价经销商');
					return false;
				}
				return true
				
				
			},
			submitOk () {
				let {username, userphone, address, count, numberAddress, dealerIdList, buyTimeVal} = this.formData
				let param = {
					username,
					phone: userphone,
					s_city_id: numberAddress[1],
					t_city_id: address[1],
					buy_nums: count,
					truck_info_id: this.truck_info_id,
					buy_time: buyTimeVal, // 提车时间 (0:一周,1:一个月,2:三个月)
					dealerid: dealerIdList.toString()
				}
				if(!this.checkForm()) {
					return false;
				}
				console.log(111);
				this.getLowestPrice(param).then(()=>{
					this.$vux.toast.text('获取成功')
					this.$router.push({path: `/detail/descript?id=${this.truck_info_id}`})
				})
			}
		},
		created () {
			this.truck_info_id = this.$route.query.id;
			this.getTruckBaseInfo({truck_info_id:this.truck_info_id})
			this.getDealerListInfo({truckid:this.truck_info_id,city_name:'无锡'})
		}
	}
</script>

<style lang = 'scss' scoped>
	.car-info {
		align-items: center;
		padding: 0.26667rem;
		min-height: 1.33333rem;
	}
	.p8 {
		padding: 0.21333rem;
	}
	.form-input {
		display: block;
		width: 100%;
		height: 1.38667rem;
		border: 1px solid #f0f0f0;
		background-color: #f5f5f5;
		border-radius: 0.13333rem;
		padding-left: 0.26667rem;
		font-size: 0.37333rem;
	}
	.business-item {
		align-items: center;
		height: 2.0rem;
	}
</style>